<template>
  <div class="resign">
    <Card class="card">
      <validate-form @form-sumit="onFormSumit" class="resign-form">
        <validate-input
          :rules="emailRules"
          v-model="resignUser.email"
          labeltext="邮箱:"
        ></validate-input>
        <validate-input
          :rules="nickNameRules"
          v-model="resignUser.nickName"
          labeltext="用户名:"
        ></validate-input>
        <validate-input
          :rules="passwordRules"
          v-model="resignUser.password"
          labeltext="密码:"
        ></validate-input>
        <validate-input
          :rules="againPasswordRules"
          v-model="resignUser.againPassword"
          labeltext="重复密码:"
        ></validate-input>

        <template v-slot:sumit>
          <button type="submit" class="btn btn-primary sumit-btn">提交</button>
        </template>
      </validate-form>
    </Card>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import ValidateForm from "@/components/ValidateForm.vue";
import ValidateInput, { RulesProps } from "@/components/ValidateInput.vue";
import Card from "@/components/Card.vue";
import axios from "@/api/axios";
import createMessage from "../components/CreateMessage";
import { useRouter } from "vue-router";
interface ResignProps {
  email: string;
  nickName: string;
  password: string;
  againPassword: string;
}
export default defineComponent({
  setup() {
    const router = useRouter();
    const resignUser: ResignProps = reactive({
      email: "",
      nickName: "",
      password: "",
      againPassword: "",
    });

    const emailRules: RulesProps = [
      {
        type: "required",
        message: "邮箱不能为空",
      },
      {
        type: "email",
        message: "邮箱不合格",
      },
    ];
    const nickNameRules: RulesProps = [
      {
        type: "required",
        message: "用户名不能为空",
      },
    ];
    const passwordRules: RulesProps = [
      {
        type: "required",
        message: "密码不能为空",
      },
    ];
    const againPasswordRules: RulesProps = [
      {
        type: "required",
        message: "密码不能为空",
      },
      {
        type: "custom",
        message: "两次密码不一致",
        validator: () => {
          return resignUser.password === resignUser.againPassword;
        },
      },
    ];

    const onFormSumit = (result: boolean) => {
      if (result) {
        const payload = {
          email: resignUser.email,
          nickName: resignUser.nickName,
          password: resignUser.password,
        };
        axios
          .post("/users", payload)
          .then((res) => {
            if (res.data.code !== 0) {
              createMessage(res.data.message, "error");
              return;
            }
            createMessage("注册成功,跳转登录页面", "success");
            router.push("/login");
          })
          .catch((e) => {
            console.log(e);
          });
      }
    };
    return {
      resignUser,
      emailRules,
      nickNameRules,
      passwordRules,
      againPasswordRules,
      onFormSumit,
    };
  },
  components: {
    ValidateForm,
    ValidateInput,
    Card,
  },
});
</script>
<style lang="scss" scoped>
@import "@/css/common.scss";
.resign {
  box-sizing: border-box;
  margin-bottom: -5rem;
  height: 100%;
  display: flex;
  align-items: center;
}
.card {
  margin-top: 80px;
}
.resign-form {
  width: 24rem;
}
.sumit-btn {
  margin-top: 1.5rem;
  width: 100%;
}
</style>
